<template>
  <div class="app-container">

    <el-row class="order-state-row">
      <el-col>
        <div>
          <span style="margin-right:14px">订单状态</span>
          <el-radio-group
            v-model="queryParams.status"
            size="mini"
            @input="network().getList()"
          >
            <el-radio-button :label="undefined">全部</el-radio-button>
            <el-radio-button label="0">待支付</el-radio-button>
            <el-radio-button label="1">待发货</el-radio-button>
            <el-radio-button label="2">待收货</el-radio-button>
            <el-radio-button label="3">待评价</el-radio-button>
            <el-radio-button label="6">已关闭</el-radio-button>
          </el-radio-group>
        </div>
        <div style="margin:20px 0;">
          <span style="margin-right:14px">发货状态</span>
          <el-radio-group
            v-model="queryParams.sendOutStatus"
            size="mini"
            @input="network().getList()"
            style="background:transparent !important;"
          >
            <el-radio-button :label="undefined">全部</el-radio-button>
            <el-radio-button label="0">待发货</el-radio-button>
            <el-radio-button label="1">已发货</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
    </el-row>
    <dk-query
      ref="nxIB"
      :searchForm="queryParams"
      :inputList="inputList"
      :queryTable="click().handleQuery"
      labelWidth="110"
    >
    </dk-query>
    <dk-table
      ref="table"
      :column="column"
      :pagination="paginationObjs"
      :tableData="tableData"
      :height="tableHeight"
    >
    </dk-table>
    <el-dialog
      title="发货"
      :visible.sync="shipments.dialog"
      width="50%"
    >
      <el-form
        ref="shipmentsForm"
        :model="shipments.data"
        :rules="shipments.rules"
        style="padding:0 40px"
        label-position="left"
        label-width="80px"
      >
        <el-form-item
          prop="code"
          label="物流公司"
        >
          <el-select
            @change="selectCompany"
            placeholder="请选择物流公司"
            filterable
            v-model="shipments.data.code"
            style="width: 100%;"
          >
            <el-option
              v-for="item in shipments.companyOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="orderNum"
          label="物流单号"
        >
          <el-input
            placeholder="请输入物流单号"
            v-model="shipments.data.orderNum"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="click().handleShipmentsCancel('shipmentsForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="click().handleShipmentsClose('shipmentsForm')"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
// 接口api：first step
import {
  getOrderList,
  getCompanyList,
  sendGoods,
} from "@/api/merchant-order-manage/order-list.js";

export default {
  data() {
    return {
      // 活跃标签
      activeName: "快递配送",
      // 订单状态当前选中项
      orderStateActive: "全部",
      paymengActive: "全部",
      loading: true,
      shipments: {
        dialog: false,
        data: {
          orderId: "",
          orderNum: "",
          goodsId:""
        },
        companyOptions: [],
        rules: {
          // 必填，最多200字
          code: [
            { required: true, message: "请选择物流公司", trigger: "blur" },
          ],
          orderNum: [
            { required: true, message: "请输入物流单号", trigger: "blur" },
          ],
        },
      },
      // 规程toolbar：two step
      inputList: [
        {
          type: "input",
          placeholder: "请输入",
          label: "商品名称",
          name: "goodsName",
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "用户昵称",
          name: "userNickName",
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "订单编号",
          name: "orderNo",
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "手机号",
          name: "userPhone",
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "收货人姓名",
          name: "consigneeName",
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "收货人手机号",
          name: "consigneePhone",
        },
        {
          type: "daterange",
          placeholder: "选择下单时间",
          label: "下单时间",
          name: "dateRange",
          fun: (row) => {
            this.queryParams.dateRange[0] = `${row[0]} 00:00:00`;
            this.queryParams.dateRange[1] = `${row[1]} 23:59:59`;
          },
        },
        {
          type: "select",
          placeholder: "请选择",
          label: "购买方式",
          name: "purchaseType",
          optionList: [
            {
              name: "全款",
              value: 0,
            },
            {
              name: "定金",
              value: 1,
            },
          ],
        },

        {
          type: "common-button",
          isShowExport: true,
          hasPermissObj: {
            add: () => `${this.urlObject.permissPrefix}add`,
          },
          searchFun: (searchForm) => {
            this.queryParams = searchForm;
            this.click().handleQuery();
          },
          resetFun: () => {
            this.click().resetQuery();
          },
          exportFun: () => {
            this.click().handleExport();
          },
        },
      ],
      // 规程表头：shree step
      column: [
        {
          value: "orderNo",
          name: "订单编号",
        },
        {
          value: "userNickName",
          name: "用户昵称",
        },
        {
          value: "userPhone",
          name: "手机号码",
        },
        {
          value: "goodsName",
          name: "商品名称",
        },
        {
          value: "realPayRmb",
          name: "实付款",
        },
        {
          value: "purchaseType",
          name: "购买方式",
          stateList: [
            {
              name: "全款",
              value: 0,
            },
            {
              name: "定金",
              value: 1,
            },
          ],
        },
        {
          value: "consigneeName",
          name: "收货人姓名",
        },
        {
          value: "consigneePhone",
          name: "收货人手机号",
        },
        {
          value: "status",
          name: "订单状态",
          stateList: [
            {
              name: "待支付",
              value: 0,
            },
            {
              name: "待发货",
              value: 1,
            },
            {
              name: "待收货",
              value: 2,
            },
            {
              name: "待评价",
              value: 3,
            },
            {
              name: "已评价",
              value: 4,
            },
            {
              name: "售后中",
              value: 5,
            },
            {
              name: "已关闭",
              value: 6,
            },
            {
              name: "已取消",
              value: 7,
            },
          ],
        },
        {
          value: "payType",
          name: "支付方式",
          stateList: [
            {
              name: "未支付",
              value: 0,
            },
            {
              name: "微信支付",
              value: 1,
            },
            {
              name: "微信+积分支付",
              value: 2,
            },
          ],
        },
        {
          value: "sendOutStatus",
          name: "发货状态",
          stateList: [
            {
              name: "待发货",
              value:  '0',
            },
            {
              name: "已发货",
              value: '1',
            },
          ],
        },
        {
          value: "createTime",
          name: "下单时间",
        },
        {
          width: 120,
          value: "id",
          name: "管理",
          fixed: "right",
          type: "button",
          buttonList: [
            {
              type: "no-tooltip",
              name: "发货",
              fun: (row) => {
                this.click().handleShipments(row);
              },
              showFun: (row) => {
                return row.status == 1 && 
                row.sendOutStatus == "0" && 
                (row.payType == 1 || row.payType == 2);
              },
              color: "text",
              hasPermiss: () => `${this.urlObject.permissPrefix}edit`,
            },
            {
              type: "no-tooltip",
              name: "详情",
              fun: (row) => {
                this.click().handleDetail(row);
              },
              color: "text",
              hasPermiss: () => `${this.urlObject.permissPrefix}detail`,
            },
          ],
        },
      ],
      // 分页器
      paginationObjs: {
        paginationChange: function () {
          this.network().getList(false);
        }.bind(this),
        page: 1,
        limit: 10,
        total: 0,
        loading: false,
      },
      // 查询参数
      queryParams: {},
      // 表格数据
      tableData: [
        
      ],
      // url对象：four step
      urlObject: {
        permissPrefix: "merchant-order-manage:order-list:",
        routePathPrefix: "/merchant-order-manage/orderList/",
      },
      // 接口存储对象：five step
      interfaceObj: {
        getApiName: getOrderList,
      },
    };
  },

  created() {
    this.network().getList();
    this.getTableHeight.call(this);
  },
  methods: {
    selectCompany(expressCode) {
      const companyData = this.shipments.companyOptions.find(
        (item) => item.code == expressCode
      );
      this.shipments.data = { ...this.shipments.data, ...companyData };
    },

    click() {
      return {
        // 搜索
        handleQuery: async () => {
          this.paginationObjs.page = 1;
          this.network().getList();
        },
        // 重置
        resetQuery: async () => {
          this.queryParams = this.$options.data().queryParams;
          this.paginationObjs.page = 1;
          this.paginationObjs.limit = 10;
          this.network().getList();
        },
        // 详情
        handleDetail: async (row) => {
          console.log(row);
          this.$router.push({
            path: `${this.urlObject.routePathPrefix}detail/${row.id}`,
          });
        },
        // 导出
        handleExport: async (data) => {
          const params = this.deepCopy(this.paginationObjs);
          delete params.dateRange;
          const obj = {
            ...params,
            beginTime: this.queryParams.dateRange?.[0],
            afterTime: this.queryParams.dateRange?.[1],
          };
          this.download(
            "/cms-shop/api/order-base/export",
            {
              ...obj,
            },
            `订单列表_${new Date().getTime()}.xlsx`
          );
        },
        // 发货
        handleShipments: async (row) => {
          this.shipments.data.orderId = row.id;
          this.shipments.data.goodsId = row.goodsId;

          this.shipments.dialog = true;
          this.network().getCompany();
        },
        // 发货 - 确认 - 关闭对话框
        handleShipmentsClose: async (formName) => {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let that = this.shipments.data;
              const logistics = {
                orderGoodsRoList: [
                  {
                    orderId: that.orderId,
                    logisticsName: that.name,
                    logisticsNo: that.orderNum,
                    logisticsStatus: "",
                    goodsId: that.goodsId,
                  },
                ],
                orderId: that.orderId,
              };
              this.network().sendRequest(logistics);
            } else {
              return false;
            }
          });
        },
        // 发货 - 取消 - 关闭对话框
        handleShipmentsCancel: async (formName) => {
          this.$refs[formName].resetFields();
          this.shipments.dialog = false;
        },
      };
    },
    network() {
      return {
        getList: async () => {
          const params = this.deepCopy(this.queryParams);
          delete params.dateRange;
          const obj = {
            ...params,
            pageNum: this.paginationObjs.page,
            pageSize: this.paginationObjs.limit,
            beginTime: this.queryParams.dateRange?.[0],
            afterTime: this.queryParams.dateRange?.[1],
          };
          this.loading = true;
          try {
            const { getApiName } = this.interfaceObj;
            const data = await getApiName(obj);
            console.log(data);
            this.loading = false;
            this.tableData = data.rows;
            this.paginationObjs.total = data.total;
          } catch (error) {
            this.loading = false;
          }
        },
        // 获取快递公司
        getCompany: async () => {
          const data = await getCompanyList();
          this.shipments.companyOptions = data.rows;
        },
        // 发货
        sendRequest: async (obj) => {
          console.log(obj);
          const {code,data} = await sendGoods(obj);
          if(code ==  0){
            this.shipments.dialog = false;
            this.$message({
              message: '发货成功',
              type: 'success',
            });
            this.network().getList();
            this.$refs['shipmentsForm'].resetFields();
          }
        },
      };
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-message-box__title span {
  position: relative;
  left: 37px !important;
}

.order-state-row {
  font-size: 14px;
  font-weight: bold;
  color: #606266;
  padding: 0px 40px;
}
::v-deep .cell {
  .el-button {
    margin-right: 10px;
  }
}
::v-deep .order-state-row{
  padding-left:0;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner{
  color: #1890ff;
  background-color:transparent;
}
</style>